<template>
  <div class="dk-row">
    <div class="h1">
      表格
    </div>
    <div class="code_wrapper">
      <dk-table :theads="theads" :tbodys="tbodys"></dk-table>
      <pre class="language-html"><code class="language-html">
        &ltdk-table :theads="theads" :tbodys="tbodys"&gt&lt/dk-table&gt
      </code><code class="language-js">
        export default {
          data() {
            return {
              theads:{
                val1:"人",
                val2:"时间",
                val3:"地点",
                val4:"任务",
              },
              tbodys:{
                {"姓名":"张三","时间":"2015-02-28","地点":"家里","任务":"学习"},
                {"姓名":"张三","时间":"2015-02-28","地点":"家里","任务":"学习"},
                {"姓名":"张三","时间":"2015-02-28","地点":"家里","任务":"学习"},
                {"姓名":"张三","时间":"2015-02-28","地点":"家里","任务":"学习"},
                {"姓名":"张三","时间":"2015-02-28","地点":"家里","任务":"学习"},
                {"姓名":"张三","时间":"2015-02-28","地点":"家里","任务":"学习"}
              }
            }
          }
        }
      </code></pre>
    </div>
    <div class="h2">
      分页
    </div>
    <div class="h4">
      @pagination="pagination" 用于获取点击分页按钮时的数字
    </div>
    <div class="code_wrapper">
      <dk-pagination @pagination="pagination" :all="all" :cur="cur"></dk-pagination>
      <pre class="language-html"><code class="language-html">
        &ltdk-pagination @pagination="pagination" :all="all" :cur="cur"&gt&lt/dk-pagination&gt
      </code><code class="language-js">
        export default {
          data() {
            return {
              cur:1,
              all:21
            }
          },
          methods:{
            pagination:function(page){
              alert(page);
            }
          }
        }
      </code></pre>
    </div>
  </div>
</template>
<script type="text/javascript">
  // import Vue from 'vue';
  import '../../../assert/css/table.css';
  import '../../../assert/css/style.css';
  import '../../../assert/css/pagination.css';
  // import DkUI from '../../../assert/js/dk-components.js';
  // Vue.use(DkUI);
  export default {
    data(){
      return {
        theads:{
          val1:"人",
          val2:"时间",
          val3:"地点",
          val4:"任务",
        },
        tbodys:[
          {"姓名":"张三","时间":"2015-02-28","地点":"家里","任务":"学习"},
          {"姓名":"张三","时间":"2015-02-28","地点":"家里","任务":"学习"},
          {"姓名":"张三","时间":"2015-02-28","地点":"家里","任务":"学习"},
          {"姓名":"张三","时间":"2015-02-28","地点":"家里","任务":"学习"},
          {"姓名":"张三","时间":"2015-02-28","地点":"家里","任务":"学习"},
          {"姓名":"张三","时间":"2015-02-28","地点":"家里","任务":"学习"}
        ],
        cur:1,
        all:21
      }
    },
    methods:{
      pagination:function(page){
        alert(page);
      }
    }
  }
</script>
